<template>
    <!-- 轮播图 -->
    <div class="banner" v-if="bannerList.length > 0">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="{ bannerid, img, alt } in bannerList" :key="bannerid">
                <img :src="img" :alt="alt" />
            </van-swipe-item>
        </van-swipe>
    </div>

</template>

<script setup lang="ts">

import { useHomeSwiper } from '@/hooks/useListItem'

const bannerList = useHomeSwiper()

</script>

<style scoped lang="scss">
.banner {
    box-sizing: border-box;
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        text-align: center;
        background-color: #39a9ed;

        img {
            display: block;
            width: 100%;
        }
    }
}
</style>